<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>响应式</title>
    <!-- <script src="./vue.global.js"></script> -->
    <!--引入vue2开发版本的vue核心包-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<!--
生命周期钩子函数

-->

<body>
    <div id="app">
        希望一进页面就能获取到输入框的焦点：<input type="text" id="test"/>
        <div v-for="(item,index) in newList" :key="item.id">
            <h2>{{ item.title }}</h2>
            <p>{{item.source}}-{{item.time}}</p>
            <img v-bind:src="item.img">
        </div>
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                newList: []
            },
            async created() {
                console.log("初始化响应数据")
                // 第一步：发送请求获取数据
                const res = await axios("http://hmajax.itheima.net/api/news")
                console.log(res)
                // 第二步，更新数据
                this.newList = res.data.data
            },
            mounted() {
                console.log("只有页面渲染完成才能操作dom")
                document.querySelector("#test").focus()
            }
        })
    </script>

</body>

</html>